<template>
   <div class="shop shopManage">
     <p class="basicTitleNormal">基本信息</p>
     <div class="basicBody">

        <div class="shopIcon shopNormal">
          <h4>店铺图标</h4>
          <div>
            <div class="imgBox">
              <el-upload
                class="over-hidden"
                :action="uploadUrl"
                :data="uploadData"
                :on-success="handleAvatarSuccess"
                :on-error="handleAvatarError"
                :before-upload="beforeAvatarUpload">
                <img v-if="portalWebsiteData.websiteLogoUrl" :src="portalWebsiteData.websiteLogoUrl" class="avatar" height="95" width="auto">
              </el-upload>
            </div>
            <em class="iconfont">&#xe61f;</em>
          </div>
        </div>

       <div class="shopNormal shopName" @click="go_websiteName">
         <h4>店铺名称</h4>
         <div>
           <span v-if="portalWebsiteData.websiteName">{{portalWebsiteData.websiteName}}</span>
           <span v-else>未设置</span>
           <em class="iconfont">&#xe61f;</em>
         </div>
       </div>
       <div class="shopNormal shopIntroduce" @click="go_websiteRemark">
         <h4>店铺介绍</h4>
         <div>
           <span v-if="portalWebsiteData.websiteRemark">{{portalWebsiteData.websiteRemark}}</span>
           <span v-else>未设置</span>
           <em class="iconfont">&#xe61f;</em>
         </div>
       </div>
     </div>
     <p class="basicTitleNormal basicTitleContact">店主信息（方便联系）</p>
     <div class="basicBody">
       <div class="shopNormal shopPerson" @click="go_memberName">
         <h4>联系人</h4>
         <div>
           <span v-if="portalWebsiteData.memberName">{{portalWebsiteData.memberName}}</span>
           <span v-else>未设置</span>
           <em class="iconfont">&#xe61f;</em>
         </div>
       </div>
       <div class="shopNormal shopPhone" @click="go_operatorPhone">
         <h4>手机号</h4>
         <div>
           <span v-if="portalWebsiteData.operatorPhone">{{portalWebsiteData.operatorPhone}}</span>
           <span v-else>未设置</span>
           <em class="iconfont">&#xe61f;</em>
         </div>
       </div>
     </div>
   </div>
</template>
<script>
  import { Toast } from 'mint-ui'; //引入弹框
  export default{
      data(){
        return{
          /* start upload */
          logoImgSrc: "",
          isLogoImgSrc:false,
          uploadUrl:"/v3/misc/common/uploadFile",
          uploadData:{
            "moduleName":"Agent",
            "fileName":""
          },
          uploading:false,
          canUpload:true,
          /* end upload */
          memberCode: "",	//分销商编号
          //初始化页面数据
          portalWebsiteData: {},
        }
      },
    watch:{
      //监视logo图标变化，并回显
      logoImgSrc:function(val,oldVal){
        return val
      },
    },
    methods:{

      //修改logo
      portal_website_update(){
        this.axios({
          method: 'PUT',
          url: "/v3/portal/websites/" + localStorage.getItem("websiteCode") + "/updateByAgentAccount",
          data: {
            "websiteLogoUrl": this.logoImgSrc,	//店铺logo
          },
        }).then((res) => {
          this.portal_website_queryDataByMemberCode();
          Toast({
            message: '保存成功！',
            iconClass: 'fontSize iconfont icon-chenggong'
          });
        }).catch((err)=>{
          Toast({
            message: err.response.data,
            iconClass: 'fontSize iconfont icon-shibai'
          });
        });
      },

      /* start 店铺图标修改 */
      handleAvatarSuccess(res, file , fileList) {
        this.uploading = false;
        this.canUpload = true;
        this.isLogoImgSrc = true;
        this.logoImgSrc = res;
        this.portal_website_update();
      },

      handleAvatarError(err, file , fileList){
        this.uploading = false;
        this.canUpload = true;
        this.isLogoImgSrc = !!this.logoImgSrc;
        Toast({
          message: "Logo上传失败",
          iconClass: 'fontSize iconfont icon-shibai'
        });
      },

      beforeAvatarUpload(file) {
        this.uploading = true;
        this.canUpload = false;
        this.isLogoImgSrc = false;
        this.uploadData.fileName = file.name;
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG&&!isPNG) {
          this.uploading = false;
          this.canUpload = true;
          this.Public.openError(this,"上传头像图片只能是 JPG和PNG 格式!")
        }
        if(!isLt2M) {
          this.uploading = false;
          this.canUpload = true;
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return (isPNG || isJPG) && isLt2M;
      },
      /* end 店铺图标修改 */

      //修改店铺名称
      go_websiteName(){
        localStorage.setItem('websiteCode',this.portalWebsiteData.websiteCode);
        this.$router.push({path:'/modifyShopManage',query:{"websiteName":1}});
      },

      //修改店铺介绍
      go_websiteRemark(){
        localStorage.setItem('websiteCode',this.portalWebsiteData.websiteCode);
        this.$router.push({path:'/modifyShopManage',query:{"websiteRemark":2}});
      },

      //修改联系人
      go_memberName(){
        localStorage.setItem('websiteCode',this.portalWebsiteData.websiteCode);
        this.$router.push({path:'/modifyShopManage',query:{"memberName":3}});
      },

      //修改手机号
      go_operatorPhone(){
        localStorage.setItem('websiteCode',this.portalWebsiteData.websiteCode);
        this.$router.push({path:'/modifyShopManage',query:{"operatorPhone":4}});
      },

      //初始化店铺数据
      portal_website_queryDataByMemberCode(){
        this.axios({
          method: 'GET',
          url: "/v3/portal/websites/" + localStorage.getItem("memberCode") + "/queryDataByMemberCode",
          data: {},
        }).then((res) => {
          this.portalWebsiteData = res.data;
        }).catch((err)=>{
          Toast({
            message: err.response.data,
            iconClass: 'fontSize iconfont icon-shibai'
          });
        });
      },

    },

    mounted(){},

    activated(){
      this.portal_website_queryDataByMemberCode();  //初始化页面数据
      document.querySelector('#vue_id_title').innerHTML="店铺管理";
    },
  }
</script>
<style scoped>
  h4{
    font-style: normal;
    font-weight: normal;
  }
  .shopManage{
    min-height: 17.75rem;
    overflow: hidden;
  }
  .basicTitleNormal{
    /*margin-top: 1.28rem;*/
    padding-left: .4rem;
    font-size: 12px;
    height: 1rem;
    line-height: 1rem;
  }
  .basicTitleContact{
    margin-top: .1rem;
  }
  /*basic-body  Start*/
  .basicBody{
    background: #fff;
  }
  .shopNormal{
    padding: 0 .4rem;
    display: -webkit-box;
    border-bottom:1px solid #ddd;
    line-height: 1.5rem;
    height: 1.5rem;
  }

  .shopNormal h4, .shopIcon div{
    -webkit-box-flex: 1;
  }
  .shopNormal div{
    text-align: right;
    width: 80%;
  }

  .imgBox{
    border: 1px #ddd solid;
    display: inline-block;
    width: 1.88rem!important;
    height: 1.563rem;
    margin-top: .2rem;
  }

  .over-hidden{
    display: inline-block;
    width: 100%!important;
    height: 100%!important;
    overflow: hidden;
  }

  .shopNormal div em{
    transform: rotateZ(180deg);
    -webkit-transform: rotateZ(180deg);
    display: inline-block;
    position: relative;
  }

  .shopNormal div span{
    float: left;
    width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .shopIcon{
    line-height: 2rem;
    height: 2rem;
  }

  .shopIcon div em{
    margin-left: 4px;
    float: right;
  }
  .shopPhone,.shopIntroduce{
    border:0;
  }
  /*basic-body  End*/
</style>
